<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
    <!-- 

        清除延时器   clearTimeout 
        清除定时器   clearInterval
     -->
    
    <!-- 
        动画有帧率： 18帧/s   50毫秒 运行一次
            电影： 24/s

            时间：
            参数变化程度： 
     -->
    <script>
        var div=document.querySelector('div')
        var x=1
        var target=500
        
        var tiemrid=setInterval(function(){
            var left=div.offsetLeft
            left+=5
            var top=div.offsetTop
            top+=5
            if(top>target)
            {
                clearInterval(timerid)
            }
            if(left>target)
            {
                clearInterval(timerid)
            }
            div.style.left=left+'px'
            div.style.top=top+'px'
        },30)
        
    </script>
    
</body>
</html>